<template>
	<view class="big-box">
		<view class="list-box">
			<view class="image">
				<image class="img" referrer="no-referrer|origin|unsafe-url" :src="porps.pic" mode="aspectFill"></image>
			</view>
			<view class="text">
				<view class="text-title">{{ porps.title }}</view>
				<view class="text-card color" v-if="porps.card == '报名中'">{{ porps.card }}</view>
				<view class="text-card color1" v-if="porps.card == '进行中'">{{ porps.card }}</view>
				<view class="text-card color2" v-if="porps.card == '即将开始'">{{ porps.card }}</view>
				<view class="text-card color3" v-if="porps.card == '已结束'">{{ porps.card }}</view>
				<view class="text-card color4" v-if="porps.card == '培训未开始'">{{ porps.card }}</view>
				<view class="text-card color4" v-if="porps.card == '报名未开始'">{{ porps.card }}</view>
				<view class="text-timer ">报名截止：{{ porps.timer }}</view>
			</view>
		</view>
		<view class="hr"></view>
	</view>
</template>

<script setup>
	const porps = defineProps({
		pic: {
			type: String
		},
		title: {
			type: String
		},
		card: {
			type: String
		},
		timer: {
			type: String
		}
	});
</script>

<style lang="scss">
	.big-box {
		width: 100%;
		padding: 25rpx 0;

		.hr {
			width: 100%;
			border-bottom: 1rpx solid #e5e5e5;
			padding-top: 25rpx;
		}

		.list-box {
			width: 100%;
			height: 180rpx;
			display: flex;

			.image {
				width: 270rpx;
				height: 180rpx;
				padding-right: 25rpx;

				.img {
					width: 270rpx;
					height: 180rpx;
					border-radius: 15rpx;
				}
			}

			.text {
				margin-left: 20rpx;

				.text-title {
					text-align: left;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
				}

				.text-card {
					font-size: 20rpx;
					width: 110rpx;
					height: 32rpx;
					margin-top: 57rpx;
					text-align: center;
					font-family: PingFang SC;
					font-weight: 400;
					color: #ffffff;
					border-radius: 16px 16px 16px 0px;
				}

				.color {
					background: linear-gradient(270deg, #54e1b9, #00caa6);
				}

				.color1 {
					background: linear-gradient(270deg, #be8efb, #a76df4);
				}

				.color2 {
					background: linear-gradient(270deg, #fea449, #ffb95f);
				}

				.color3 {
					background: linear-gradient(270deg, #d9d9d9, #bcbcbc);
				}

				.color4 {
					background: linear-gradient(270deg, #40d8ee, #53a7f6);
				}

				.text-timer {
					margin-top: 20rpx;
					height: 23rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #7b7f83;
				}
			}
		}
	}
</style>